<template>
  <a-table
    :columns="columns"
    :data-source="list"
    :row-key="(record) => record.id"
    :pagination="{
      current: pageNo,
      total,
      pageSize,
      showSizeChanger: false,
      onChange: this.tablePageChange,
    }"
    :scroll="{ y: 500 }"
  >
    <span slot="select" slot-scope="text, record">
      <a-radio :checked="record.isChecked" @click="change(record)"></a-radio>
    </span>

    <span slot="cover_pic" slot-scope="text">
      <a-avatar :src="text || ''" shape="square" :size="48" icon="user" />
    </span>

    <span slot="name" slot-scope="text">
      <a-tooltip>
        <template slot="title">
          {{ text }}
        </template>
        {{ text }}
      </a-tooltip>
    </span>

    <span slot="link" slot-scope="text, record">
      {{ computedURLText(record) }}
    </span>
  </a-table>
</template>

<script>
import { getUrlParam, getDiyURLText } from "@/utils/utils.js";
import { getTopicList } from "@/api/link";

const columns = [
  {
    title: "选择",
    scopedSlots: {
      customRender: "select",
    },
    width: 60,
  },
  {
    title: "ID",
    dataIndex: "id",
    width: 60,
  },
  {
    title: "封面",
    dataIndex: "cover_pic",
    width: 64,
    scopedSlots: {
      customRender: "cover_pic",
    },
  },
  {
    title: "专题名称",
    dataIndex: "title",
    scopedSlots: {
      customRender: "title",
    },
    width: 200,
    ellipsis: true,
  },
  {
    title: "页面链接",
    scopedSlots: {
      customRender: "link",
    },
  },
];

export default {
  data() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 10,
      columns,
      list: [],
    };
  },
  props: {
    link: {
      type: Object,
      default() {
        return null;
      },
    },
  },

  created() {
    this.getList();
  },

  computed: {
    computedURLText() {
      return (item) => {
        return getDiyURLText(this.link, item).link;
      };
    },
  },

  methods: {
    tablePageChange(e) {
      this.getList(e);
    },

    async getList(pageNo = 1) {
      if (getUrlParam("store_id")) this.store_id = getUrlParam("store_id");
      const hide = this.$message.loading("加载中", 0);
      let { pageSize } = this;
      const res = await getTopicList({
        pageSize,
        pageNo,
      });

      if (res.code == 0) {
        this.pageNo = pageNo;
        let { totalCount, data } = res.data;
        this.total = totalCount;

        data = data.map((el) => {
          el.isChecked = false;
          return el;
        });
        this.list = data;
      }

      hide();
    },

    change(item) {
      this.$nextTick(() => {
        this.list.forEach((el) => {
          el.isChecked = false;
        });
        item.isChecked = true;
      });

      let link = getDiyURLText(this.link, item);
      this.$emit("handle", "link", link);
    },
  },
};
</script>
<style lang="scss" scoped></style>
